<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button:first').click(function () {
                $('ol li:eq(1)').addClass('test');
            });
            $('button:eq(1)').click(function () {
                $('ol li:eq(1)').removeClass('test');
            });
            $('button:eq(2)').click(function () {
                $('ol li:eq(1)').toggleClass('test');
            });
            $('button:eq(3)').click(function () {
                $('ol li:eq(2)').css('background-color','pink');
            });
            $('button:eq(4)').click(function () {
                $('ol li:eq(3)').css({'background-color':'pink','color':'blue','width':'300px'});
            });
        });
    </script>
</head>
<style>
    .test {
        color: blueviolet;
    }
</style>
<div>
    <ol>
        <li>addClass() - 向被选元素添加一个或多个类</li>
        <li>removeClass() - 从被选元素删除一个或多个类</li>
        <li>toggleClass() - 对被选元素进行添加/删除类的切换操作</li>
        <li>css() - 设置或返回样式属性</li>
    </ol>
    <button>addClass添加一个类css</button>
    <button>removeClass 删除一个类css</button>
    <button>toggleClass 开关切换css类</button>
    <button>css() 设置或返回样式</button>
    <button>css() 同时设置多个样式</button>
</div>

</html>